<template>
    <view class="p-20">
        <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
            <template #refresher="{refresherStatus}">
                <custom-refresher :status="refresherStatus" />
            </template>
            <template #loadingMoreNoMore>
                <custom-nomore />
            </template>

            <view class="" v-for="(item,index) in dataList" :key="index">
                <view class="bg-white p-30 flex col-center row-between m-b-20 box_shadow br12">
                    <view class="">
                        <view class="bold x">
                            商品编号:{{item.productNo}}
                        </view>
                        <view class="m-t-20">
                            状态：
                            <uni-tag v-if="item.status == 0" type="success" text="已归还" size="mini" />
                            <uni-tag v-if="item.status == 1" type="warning" text="未归还" size="mini" />
                        </view>
                    </view>
                    <view class="">
                        <span class="m-r-10">
                            <u-tag text="归还" type="primary" @click="handleReturn(item.id,item.productNo)"></u-tag>
                        </span>
                        <u-tag text="删除" type="error" @click="handleDel(item.id,item.productNo)"></u-tag>
                    </view>
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script setup>
    import {
        apiGetLendingDetail,
        apiDeleteLendingDetail,
        apiReturnLending
    } from '@/api/index.js'
    import {
        ref
    } from 'vue'
    import {
        onLoad
    } from '@dcloudio/uni-app'
    import {
        onPageScroll,
        onReachBottom
    } from '@dcloudio/uni-app';
    import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";

    const dataList = ref([])
    const paging = ref(null)
    const headId = ref('')
    const today = ref('')

    const handleReturn = (id, no) => {
        uni.showModal({
            title: '提示',
            content: '确认归还该商品吗？',
            success: (res) => {
                if (res.confirm) {
                    apiReturnLending({
                        id: id,
                        productNo: no
                    }).then(res => {
                        uni.$u.toast('归还成功')
                        paging.value.refresh()
                    }).catch(err => {
                        uni.$u.toast('归还失败')
                    })
                } else if (res.cancel) {
                    console.log('用户点击取消');
                }
            }
        })
    }

    const handleDel = (id, no) => {
        uni.showModal({
            title: '提示',
            content: '确认删除该商品吗？',
            success: (res) => {
                if (res.confirm) {
                    apiDeleteLendingDetail({
                        id: id,
                        productNo: no
                    }).then(res => {
                        uni.$u.toast('删除成功')
                        paging.value.refresh()
                    }).catch(err => {
                        uni.$u.toast('删除失败')
                    })
                } else if (res.cancel) {
                    console.log('用户点击取消');
                }
            }
        })
    }

    const queryList = (pageNo, pageSize) => {
        const params = {
            headId: headId.value,
            current: pageNo,
            pageSize: pageSize,
        }
        apiGetLendingDetail(params).then(res => {
            paging.value.complete(res.data.records);
        }).catch(res => {
            paging.value.complete(false);
        })
    }


    useZPaging(paging)

    onLoad((option) => {
        let date = new Date().getTime()
        today.value = uni.$u.timeFormat(date, 'yyyy-mm-dd');
        headId.value = option.headId
    })
</script>